<template>
  <div class="flex justify-between items-center p-[10px]">
    <Search @search="search" :placeholder="placeholder" />
    <LoginBox>
      <User @login="goLogin" @loginOut="loginOut" />
    </LoginBox>
  </div>
  <Import v-if="showImport" />
</template>

<script setup lang="ts">
import LoginBox from "@renderer/components/topHeader/loginBox.vue";
import Search from "@renderer/components/Search/index.vue";
import User from "@renderer/components/user/index.vue";
import Import from "@renderer/components/Import/index.vue";
import { useRoute } from "vue-router";
import { useUserStore } from "@renderer/store/modules/user";
let userStore = useUserStore();
let route = useRoute();
import { ref, watch, computed } from "vue";
watch(
  () => route.path,
  () => {
    if (route.path == "/templateMarket") {
      placeholder.value = "搜索文件";
      showImport.value = false;
    } else if (route.path == "/dataSource") {
      showImport.value = false;
      placeholder.value = "搜索数据源";
    } else {
      showImport.value = true;
      placeholder.value = "搜索文件";
    }
  }
);
let placeholder = ref("搜索文件");
let showImport = ref(true);
let emit = defineEmits(["search"]);
const search = (val: string) => {
  emit("search", val);
};

const goLogin = () => {
  userStore.toggleShowLogin(true);
};

const loginOut = () => {
  ElMessageBox.confirm("确定要退出吗？", {
    cancelButtonText: "取消",
    confirmButtonText: "确定",
  }).then(async () => {
    await userStore.loginOut();
  });
};
</script>

<style scoped lang="scss"></style>
